<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css基础知识练习</title>
    <link rel="stylesheet" href="main.css">
    <style>
        /* 所有使用li元素标记的元素内容都是红色 */
       li{color: red;}     
    </style>
  </head>
  <body>
      <a href="../index1.html">返回首页</a>
<h1 class="bar">css基础知识练习</h1>
    <section>
      <h2>使用css的三种方式</h1>
        <ul>
        <li>外部样式表</li>
        <li>内部样式表</li>
        <!-- 内嵌样式表，直接卸载元素当中 -->
        <li style="color: darkgoldenrod;">内嵌样式表</li>（内嵌引用添加颜色）
    </ul>
    </section>
    <section>
        <h2>css选择符</h2>
        <ul>
            <li title="E[foo*=“bar”]">属性选择符</li>
            <li title="E[foo*=]">属性选择符</li>
            <li class="bar">类选择符</li>
            <li><h2 class="bar">类选择符第二类实践</h2></li>
            <li class="bar"><a href="http://www.baidu.com">百度的链接</a>(伪类选择符使用)</li>
        </ul>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Dolor tenetur odio pariatur optio eveniet provident accusamus voluptas nam 
        voluptatum quaerat deleniti officiis hic voluptatem, sed esse placeat eaque! Vero, quia.
        </p>
    </section>
    <section id="bar">
        <p>分数：100 </p>
        
    </section>
    <section>
    <p>
      <form action="http://www.bing.com/search" method="get">
        <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
      </form>
    </p>
    <input type="date" name="born" id="出生日期">
    <form>
      <label for="male">Male</label>
      <input type="radio" name="sex" id="male" />
      <br />
      <label for="female">Female</label>
      <input type="radio" name="sex" id="female" />
    </form>
    </section>
  </body>
</html>
